<template>

  <el-main>
    <!--  搜索新增板块  -->
    <el-form
        :model="searchPrm"
        ref="searchForm"
        label-width="80px"
        :inline="true"
        size="small"
    >
<!--      <el-form-item>-->
<!--        <el-input placeholder="请输入项目名称" v-model="searchPrm.searchName"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item>
<!--        <el-button icon="el-icon-search">查询</el-button>-->
<!--        <el-button style="color:#FF7670" icon="el-icon-close">重置</el-button>-->
        <el-button  @click="dialogVisible = true" type="primary" icon="el-icon-plus">新增</el-button>
      </el-form-item>

    </el-form>


    <!--   表格显示   -->
    <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        border stripe
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children'}"
    >

      <el-table-column
          prop="projectId"
          label="编号"
      >
      </el-table-column>
      <el-table-column
          prop="projectName"
          label="类别"
      >
      </el-table-column>

      <el-table-column
          prop="projectType"
          label="规格"
      >
      </el-table-column>


      <el-table-column
          prop="projectPrice"
          label="单价（元）"
      >
      </el-table-column>

      <el-table-column align="center" label="操作">

        <template #default="scope">

          <el-button
              icon="el-icon-edit-outline"
              type="primary"
              size="small"
              @click="updatePhysical(scope.row),dialogVisible=true"
          >编辑
          </el-button>

          <el-button
              icon="el-icon-close"
              type="danger"
              size="small"
              @click="delPhysical(scope.row)"
          >删除
          </el-button>

        </template>

      </el-table-column>

    </el-table>


    <!--分页-->
    <div class="fy_div" style="margin-left: 400px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length">
      </el-pagination>
    </div>

    <!--   新增按钮表单   -->
    <el-dialog
        @close="clearPhysical()"
        title="提示"
        v-model="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <el-form :model="Physical" status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="项目名称" prop="eName">
              <el-input v-model="Physical.projectName"></el-input>

            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="项目类型" prop="eSex">
              <el-input v-model="Physical.projectType"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="10">
            <el-form-item label="项目单价" prop="eName">
              <el-input v-model="Physical.projectPrice"></el-input>

            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="clearPhysical(),dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPhysical(),dialogVisible = false">确 定</el-button>
      </span>
      </template>
    </el-dialog>

  </el-main>

</template>

<script>

import http, {service} from "@/http/request";

export default {
  name: "YxjCategory",

  data() {
    return {
      tableData: [],
      currentPage: 1, //初始页
      pagesize: 10,    //    每页的数据
      dialogVisible: false,

      // 主页表格对象
      Physical:{
        projectId:'',
        projectName:'',
        projectType:'',
        projectPrice:''
      },

      //搜索关键字
      searchPrm: {
        searchName: ''
      },//


    }

  },

  methods: {
    //查询所有表格显示
    initData() {
      service.get("http://localhost:8088/allPro")
          .then((v) => {
            this.tableData = v.data;
          })
    },

    // 新增体检类别
    addPhysical(){
      service.post("http://localhost:8088/addPro",this.Physical)
          .then((v)=>{
            this.initData()
          })
    },

    // 修改类别
    updatePhysical(physical){
      this.Physical = {
        projectId:physical.projectId,
        projectName:physical.projectName,
        projectType:physical.projectType,
        projectPrice:physical.projectPrice,
      }

    },

    // 根据id删除
    delPhysical(row){
      this.Physical.projectId=row.projectId
      service.post("http://localhost:8088/delPro",this.Physical)
          .then((v)=>{
            this.initData()
          })
    },



    // 清空表单
    clearPhysical(){
      this.Physical = {
        projectId:'',
        projectName:'',
        projectType:'',
        projectPrice:'',
      }
    },

// 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage)  //点击第几页
    },

    //按钮表单弹出
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },

  },
  created() {
    this.initData();

  },

}
</script>

<style scoped>
a {
  text-decoration: none;
}

.router-link-active {
  text-decoration: none;
}

.el-card {
  margin-top: 50px;

}

.block {
  margin-left: 350px;
}

.fy_div {
  margin-top: 20px;
  margin-left: -30px;
}
</style>
